<template>
  <PageWrapper
    :contentBackground="true"
    :dense="false"
    :contentFullHeight="true"
    :contentStyle="{ padding: '0px 20px 0px 20px', margin: 0 }"
  >
    <a-tabs v-mdoel:activeKey="activeKey">
      <a-tab-pane tab="缓存" key="cache">
        <div class="flex">
          <List
            size="small"
            bordered
            :data-source="cacheKeys"
            style="width: 500px"
          >
            <template #renderItem="{ item }">
              <ListItem @click="handleSelect(item.value)">
                <div class="cache-item">[{{ item.value }}]{{ item.label }}</div>
                <div class="cache-refresh">
                  <a-button type="link" @click="handleRefresh(item.value)"
                    >刷新</a-button
                  >
                </div>
              </ListItem>
            </template>
          </List>
          <BasicTable @register="registerTable" />
        </div>
      </a-tab-pane>
      <a-tab-pane tab="文件统计" key="file">
        <FileInfo />
      </a-tab-pane>
    </a-tabs>
  </PageWrapper>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { PageWrapper } from '@/components/Page';
import { getDictList } from '@/utils/cache/busCache';
import { List, ListItem } from 'ant-design-vue';
// import { BasicFetchResult } from '../model/baseModel';
import { BasicTable, useTable } from '@/components/Table';
import FileInfo from './components/FileInfo.vue';
import { defHttp } from '@/utils/http/axios';

const cacheKeys = ref(getDictList('cacheKey'));
const getCacheData = (params) => {
  return defHttp.get({ url: `/tools/viewCache/${params.key}` });
};
const handleSelect = (key) => {
  reload({ searchInfo: { key } });
};
const handleRefresh = (key: string) => {
  defHttp.get({ url: `/tools/refreshCache/${key}` });
};

const [registerTable, { reload }] = useTable({
  api: getCacheData,
  columns: [
    {
      title: '缓存key',
      dataIndex: 'field',
    },
    {
      title: '缓存value',
      dataIndex: 'value',
    },
  ],
  immediate: false,
  pagination: false,
});

const activeKey = ref('cache');
</script>
<style lang="less" scoped>
.cache-item {
  cursor: pointer;
}
.cache-item:hover {
  color: #0000ff;
}
</style>
